<template>
  <div>
    <h1>App</h1>

    {{ Math.random() }}

    <!-- http://localhost:8080/index.html#sdsds -->

    <ul>
      <li>
        <a href="http://localhost:8080#/a/b">Home</a>
      </li>
      <li>
        <a href="http://localhost:8080#/c/d">Shop</a>
      </li>
      <li>
        <a href="http://localhost:8080#/e/f">Order</a>
      </li>
    </ul>

    <button @click="cname = 'Home'">Home</button>
    <button @click="cname = 'Order'">Order</button>
    <button @click="cname = 'Shop'">Shop</button>

    <component :is="cname"></component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cname: 'Home',
      routes: {
        '/a/b': 'Home',
        '/c/d': 'Shop',
        '/e/f': 'Order',
      }
    }
  },
  mounted() {
    window.onhashchange = () => {
      const path = location.hash.slice(1);
      this.cname = this.routes[path];
    }
  }
}
</script>
<style>
div {
  border: solid;
  padding: 10px;
}
</style>